<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>JSMpeg Stream Client</title>
  <style type="text/css">
      html, body {
          background-color: #111;
          text-align: center;
      }
  </style>

</head>
<body>
<div>
  <span>WS地址</span>
  <input type="text" id="wsUrl" value="ws://rtsp.test.com:8011" style="width: 300px;">
  <button onclick="initPlayer()">播放</button>
</div>
<div style="margin-top: 20px;">
  <canvas id="video-canvas"></canvas>
</div>

<script type="text/javascript" src="jsmpeg.min.js"></script>
<script type="text/javascript">
  var canvas = document.getElementById('video-canvas')
  // var url = 'ws://rtsp.test.com:8011'
  // var player = new JSMpeg.Player(url, { canvas: canvas })

  function initPlayer(){
    let wsUrlInput = document.getElementById('wsUrl');
    // 获取输入框的值
    let wsUrl = wsUrlInput.value;
    new JSMpeg.Player(wsUrl, { canvas: canvas })

  }
</script>
</body>
</html>
